<template>
  <div>
    <h1>v-model双向数据绑定</h1>
    <!-- 表单 -->
    <div class="from">
      <div class="from-item">
        姓名: <input type="text" v-model="formData.name" />
      </div>
      <div class="from-item">
        年龄: <input type="text" v-model="formData.age" />
      </div>
      <div class="from-item">
        性别: 男:<input type="radio" value="男" v-model="formData.sex" />
        女:<input type="radio" value="女" v-model="formData.sex" />
      </div>
      <div class="from-item">
        爱好: 看电视:<input
          type="checkbox"
          value="看电视"
          v-model="formData.hobs"
        />
        打篮球:<input type="checkbox" value="打篮球" v-model="formData.hobs" />
        乒乓球:<input type="checkbox" value="乒乓球" v-model="formData.hobs" />
        下棋:<input type="checkbox" value="下棋" v-model="formData.hobs" />
        书法:<input type="checkbox" value="书法" v-model="formData.hobs" />
        看书:<input type="checkbox" value="看书" v-model="formData.hobs" />
        唱歌:<input type="checkbox" value="唱歌" v-model="formData.hobs" />
      </div>
      <div class="from-item">
        居住地:
        <select v-model="formData.address">
          <option value="西安">西安</option>
          <option value="北京">北京</option>
          <option value="上海">上海</option>
        </select>
      </div>
      <div class="from-item">
        箴言 <textarea v-model="formData.desc" cols="30" rows="10"></textarea>
      </div>
      <div class="from-item">
        同意: <input type="checkbox" v-model="isAgree" />
      </div>
      <div class="from-item">
        <button @click="submit">提交</button>
      </div>
      <table >
        <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>爱好</th>
          <th>居住地</th>
          <th>箴言</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in tableData" :key="index">
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
            <td>{{item.sex}}</td>
            <td>{{item.hobs}}</td>
            <td>{{item.address}}</td>
            <td>{{item.desc}}</td>
            <td><button @click="handleDelete(index)">删除</button></td>
          </tr>
        </tbody>




      </table>
    </div>
  </div>
</template>

<script>
export default {
  //数据先行
  data() {
    return {
      formData: {
        name: '花郎',
        age: 18,
        sex: '男',
        hobs: ['唱歌', '看书', '下棋', '打篮球'],
        address: '西安',
        desc: '如果事与愿违,就相信上帝一定另有安排'
      },
        isAgree: false,//默认不选中
        tableData:[
          {name: '小樱',
          age: 11,
          sex: '女',
          hobs: ['唱歌'],
          address: '西安',
          desc: '篮球的女孩子'
        },
        ]
    }
  },
  //事件
  methods:{
    submit(){
      //console.log('666');
      //console.log(this.formData);
      if(this.isAgree){
        this.tableData.unshift({...this.formData})
        //表单中的数据提交完后,将表单数据清空,方便下次填写
        this.formData={
        name: '',
        age: '',
        sex: '',
        hobs: [],
        address: '',
        desc: ''
        }
      } 
    },
    handleDelete(index){
      //splice    (索引,删除几个)
      //console.log(this.tableData);
      this.tableData.splice(index,1)
    }

  }
}
</script>

<style lang="scss" scoped>
table{
  width: 800px;
  margin: 30px 100px;
  border: 1px solid;
  border-collapse: collapse;
  tr{
    height: 30px;
    line-height: 30px;
    text-align: center;
  }
}
</style>